<template>
  <header class="tag-header" :class="{ 'home-page': $route.name === 'home', bg: scrolls }">
    <div class="tag-content clearfix">
      <div class="logo" @click="home"><img src="@/assets/img/logo.png" alt="data-tag" />云签</div>
      <ul class="tag-nav clearfix">
        <template v-for="item in menuList">
          <li
            :key="item.menuId"
            v-if="item.menuType === 1 && item.visible && item.treeLevel === 1 && item.menuRouteName !== 'home'"
            @mouseenter="showItem = item.menuId"
            @mouseleave="showItem = 0"
          >
            <div class="menuNm">
              <span>{{ item.menuNm }}</span>
            </div>
            <div class="children" v-show="showItem === item.menuId">
              <div class="tag-content">
                <ol class="clearfix">
                  <template v-for="(child, index) in item._children">
                    <li :key="child.menuId">
                      <div v-if="child.menuType === 1 && child.visible" class="second-title">
                        <span class="second-index">{{ '0' + (index + 1) }}</span>
                        <span>
                          <span class="title-ename">{{ child.menuNm }}</span
                          ><br />
                          <template v-if="item.menuId === 12000000">
                            <template v-if="child.menuId === 12010000">
                              Tag Creation
                            </template>
                            <template v-if="child.menuId === 12020000">
                              Tag Management
                            </template>
                            <template v-if="child.menuId === 12030000">
                              Tag Service
                            </template>
                            <template v-if="child.menuId === 12040000">
                              Tag Analyse
                            </template>
                          </template>
                          <template v-else-if="item.menuId === 11000000">
                            <template v-if="child.menuId === 11010000">
                              Users and authorities
                            </template>
                            <template v-if="child.menuId === 11020000">
                              System setup
                            </template>
                            <template v-if="child.menuId === 11030000">
                              System monitor
                            </template>
                          </template>
                          <template v-else-if="item.menuId === 14000000">
                            Tag Management
                          </template>
                          <template v-else-if="item.menuId === 16000000">
                            Tag WorkStation
                          </template>
                        </span>
                      </div>
                      <div
                        class="item title-ename"
                        :class="{ active: child.menuRouteName === menuActiveName }"
                        v-else-if="child.menuType === 2 && child.visible"
                        @click="hadleRoute(child)"
                      >
                        {{ child.menuNm }}
                      </div>
                      <div class="item-wrap clearfix">
                        <template v-if="item.menuId === 12000000">
                          <img src="~@/assets/img/menu_creation.png" v-if="child.menuId === 12010000" />
                          <img src="~@/assets/img/menu_management.png" v-else-if="child.menuId === 12020000" />
                          <img src="~@/assets/img/menu_service.png" v-else-if="child.menuId === 12030000" />
                          <img src="~@/assets/img/menu_analyse.png" v-else-if="child.menuId === 12040000" />
                        </template>
                        <template v-else-if="item.menuId === 11000000">
                          <img src="~@/assets/img/menu_permission.png" v-if="child.menuId === 11010000" />
                          <img src="~@/assets/img/menu_system.png" v-else-if="child.menuId === 11020000" />
                          <img
                            src="~@/assets/img/menu_monitor.png"
                            width="120"
                            style="margin-top: -20px"
                            v-else-if="child.menuId === 11030000"
                          />
                        </template>
                        <template v-else-if="item.menuId === 14000000">
                          <img src="~@/assets/img/menu_management.png" v-if="child.menuId === 14010000" />
                        </template>
                        <template v-else-if="item.menuId === 16000000">
                          <img src="~@/assets/img/menu_workstation.png" v-if="child.menuId === 16010000" />
                        </template>
                        <div class="item-content">
                          <template v-for="tab in child._children">
                            <div
                              class="item title-ename"
                              :class="{ active: tab.menuRouteName === menuActiveName }"
                              :key="tab.menuId"
                              v-if="tab.menuType === 2 && tab.visible"
                              @click="hadleRoute(tab)"
                            >
                              {{ tab.menuNm }}
                            </div>
                          </template>
                        </div>
                      </div>
                    </li>
                  </template>
                </ol>
              </div>
            </div>
          </li>
        </template>
      </ul>
      <span
        class="header-workstation-item"
        @click="$router.push({ name: 'kpi' })"
        v-if="$auth('index:indexAllocation:view')"
      >
        <icon-svg name="iconKpi"></icon-svg>
        <span>指标管理</span>
      </span>
      <div class="tools">
        <el-autocomplete
          v-model="keyword"
          ref="searchBox"
          :fetch-suggestions="querySearch"
          :trigger-on-focus="keyword ? true : false"
          placeholder="搜索标签名称、口径、字段、专辑名称"
          @select="handleSelect"
          @keyup.enter.native="onSearch"
          popper-class="market-search-suggestion"
          clearable
        >
          <template slot-scope="{ item }">
            <el-row>
              <el-col :span="2">
                <icon-svg :name="Number(item.asset_type) | iconNameFormatter" class="item-icon"></icon-svg>
              </el-col>
              <el-col :span="13" class="item-ename">
                <span v-html="item.asset_nm"></span>
                <span v-if="item.asset_field_nm">
                  <span class="item-split">|</span>
                  <span v-html="item.asset_field_nm"></span>
                </span>
              </el-col>
              <el-col :span="9" class="item-cname">
                <span v-html="item.asset_desc"></span>
              </el-col>
            </el-row>
          </template>
          <i slot="suffix" class="el-input_icon el-icon-search" @click="onSearch"></i>
        </el-autocomplete>
        <el-dropdown>
          <div class="header-action-userIcon">
            <span class="avatar">
              <img v-if="userInfo.avatarFileId" :src="$img(userInfo.avatarFileId)" />
              <icon-svg name="iconUserHead" v-else class="user-default-icon"></icon-svg>
            </span>
            <span v-if="userInfo.loginUname === 'guest'" class="header-action-userName" @click="logout">请登录</span>
            <span v-else class="header-action-userName">{{ this.$name(userInfo) }}</span>
            <!-- <i class="el-icon-caret-bottom" v-if="userInfo.loginUname !== 'guest'"></i> -->
          </div>
          <el-dropdown-menu slot="dropdown">
            <div class="header-action-items">
              <div class="header-action-top">
                <div class="header-action-info clearfix">
                  <div class="header-action-avatar">
                    <img v-if="userInfo.avatarFileId" :src="$img(userInfo.avatarFileId)" />
                    <icon-svg name="iconUserHead" v-else class="user-default-icon2"></icon-svg>
                  </div>
                  <div class="header-action-text">
                    <div class="login-name">
                      {{ this.$name(userInfo) }}
                    </div>
                    <div>
                      {{ userInfo.lastLogin }}
                    </div>
                  </div>
                </div>
              </div>
              <div class="header-action-content">
                <ul>
                  <li><span>工号：</span>{{ userInfo.empId }}</li>
                  <li><span>公司：</span>{{ userInfo.compNm }}</li>
                  <li><span>部门：</span>{{ userInfo.deptNm }}</li>
                  <li><span>角色：</span>{{ userInfo.roleNames ? userInfo.roleNames.join(',') : '' }}</li>
                </ul>
                <div class="quick-btn clearfix">
                  <el-col :span="12" @click.native="changeTab('basisInfo')"
                    ><icon-svg name="iconHeaderFile"></icon-svg>基本资料</el-col
                  >
                  <el-col :span="12" @click.native="changeTab('settings')"
                    ><icon-svg name="iconHeaderSkin"></icon-svg>个性化设置</el-col
                  >
                </div>
              </div>
              <div class="header-action-bottom">
                <el-button type="primary" @click="logout">退出平台</el-button>
              </div>
            </div>
          </el-dropdown-menu>
        </el-dropdown>
        <main-info-item></main-info-item>
        <span class="header-audit" v-if="$auth('tag:audit:view')" @click="$router.push({ name: 'audit' })">
          <icon-svg name="iconAudit"></icon-svg>
        </span>
      </div>
    </div>
  </header>
</template>

<script>
import market from '../modules/market/utils/market'
import mainInfoItem from './main-info-item'
import '../modules/market/utils/marketFormatter'
export default {
  components: {
    mainInfoItem
  },
  data() {
    return {
      showItem: 0,
      keyword: '',
      menuActiveName: '',
      scrolls: false,
      selectValue: false
    }
  },
  computed: {
    selectedTab: {
      get() {
        if (this.$route.name === 'personal') return this.$route.query.tabName
        return ''
      }
    },
    menuList: {
      get() {
        return this.$store.state.common.menuList
      },
      set(val) {
        this.$store.commit('common/updateMenuList', val)
      }
    },
    userInfo: {
      get() {
        return this.$store.state.user.detailInfo
      },
      set(val) {
        this.$store.commit('user/updateDetailInfo', val)
      }
    }
  },
  created() {
    this.getUserInfo()
    this.routeHandle(this.$route)
  },
  watch: {
    $route: 'routeHandle'
  },
  mounted() {
    this.$nextTick(() => window.addEventListener('scroll', this._initScroll, false))
  },
  methods: {
    getUserInfo() {
      this.$ajax({
        url: this.$ajax.setUrl('auth/authUser/detailInfo'),
        method: 'get',
        params: this.$ajax.setParams()
      }).then(({ data }) => {
        if (data && data.code === '0') {
          this.userInfo = data.data
        } else {
          this.$message.error(data.data || data.msg)
        }
      })
    },
    querySearch(queryString, cb) {
      if (!queryString) {
        cb([])
        return
      }
      this.$ajax({
        url: this.$ajax.setUrl('index/supermarket/query'),
        method: 'get',
        params: this.$ajax.setParams({
          from: 0,
          queryStr: queryString,
          schSrc: 1,
          size: 5,
          assetStatus: 1
        })
      }).then(({ data }) => {
        if (data && data.code === '0') {
          let content = data.data.contents
          if (data.data.users) content = content.concat(data.data.users)
          cb(content)
        } else {
          cb([])
        }
      })
    },
    handleSelect(item) {
      this.selectValue = true
      if (Number(item.asset_type) === 3) {
        this.$ajax({
          url: this.$ajax.setUrl(`ast/astAlbum/openPermission/${item.asset_id}`),
          method: 'get',
          params: this.$ajax.setParams()
        }).then(({ data }) => {
          if (data && data.code === '0') {
            if (data.data) {
              let routeName = market.typeToRoute(Number(item.asset_type))
              this.$blank(routeName, { params: { id: item.asset_id } })
            } else this.$message.error(`没有查看该专辑的权限`)
          } else {
            this.$message.error(data.data || data.msg)
          }
        })
      } else {
        if (!this.$auth('sch:astTag:view')) {
          this.$message.error(`没有查看标签的权限`)
          return
        }
        let routeName = market.typeToRoute(Number(item.asset_type))
        this.$blank(routeName, { params: { id: item.asset_id } })
      }
    },
    onSearch() {
      if (!this.selectValue) {
        this.$refs.searchBox.activated = false
        this.$refs.searchBox.$refs.input.blur()
        if (this.$route.name === 'market-search')
          this.$router.push({ name: 'market-search', query: { keyword: this.keyword } })
        else this.$blank('market-search', { query: { keyword: this.keyword } })
      } else this.selectValue = false
    },
    hadleRoute(menu) {
      if (menu.menuId == 16010100) this.goWorkStation()
      else if (menu.menuId == 16010200) this.goNotebook()
      else {
        this.$blank(menu.menuRouteName)
        this.showItem = 0
      }
    },
    home() {
      this.$blank('home')
    },
    goWorkStation() {
      this.$ajax({
        url: this.$ajax.setUrl('mta/mtaPlatform/connectorDts'),
        method: 'post',
        data: this.$ajax.setData()
      }).then(({ data }) => {
        if (data && data.code === '0') {
          window.open(
            window.location.protocol +
              '//' +
              window.location.hostname +
              ':8766/workstation/sql?token=' +
              window.localStorage.getItem('token')
          )
        } else {
          this.$message.error(data.data || data.msg)
        }
      })
    },
    goNotebook() {
      this.$ajax({
        url: this.$ajax.setUrl('mta/mtaPlatform/connectorDas'),
        method: 'post',
        data: this.$ajax.setData()
      }).then(({ data }) => {
        if (data && data.code === '0') {
          window.open(
            window.location.protocol +
              '//' +
              window.location.hostname +
              ':8766/workstation/notebook?token=' +
              window.localStorage.getItem('token')
          )
        } else {
          this.$message.error(data.data || data.msg)
        }
      })
    },
    changeTab(tabName) {
      if (this.selectedTab === tabName) return
      this.$blank('personal', { query: { tabName } })
    },
    logout() {
      this.$utils.clearLoginInfo()
      this.$utils.sysOut()
    },
    // 路由变化后执行的操作
    routeHandle(route) {
      if (route.name === 'home') window.addEventListener('scroll', this._initScroll, false)
      else window.removeEventListener('scroll', this._initScroll, false)
      this.menuActiveName = route.name
    },
    _initScroll() {
      let docTop = document.documentElement.scrollTop || document.body.scrollTop
      if (docTop >= 100) this.scrolls = true
      else this.scrolls = false
    }
  }
}
</script>

<style lang="scss"></style>
